<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" class="demo-form-inline" :data="params">
        <el-form-item label="车牌号码：" prop="carNumber">
          <el-input v-model="params.carNumber" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="车主姓名：" prop="personName">
          <el-input v-model="params.personName" placeholder="请输入车主姓名" />
        </el-form-item>

        <el-form-item label="状态：" prop="carStatus">
          <el-select v-model="params.cardStatus" placeholder="未选择">
            <el-option
              v-for="item in carStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" @click="$router.push('/carCardAdd')">添加月卡</el-button>
    <el-button type="primary">批量删除</el-button>

    <!-- 表单区域 -->
    <el-table
      ref="multipleTable"
      :data="carCardList"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type="index"
        label="序号"
        width="120"
      />

      <el-table-column
        prop="personName"
        label="车主名称"
        width="120"
      />
      <el-table-column
        prop="phoneNumber"
        label="联系方式"
        show-overflow-tooltip
      />
      <el-table-column
        prop="carNumber"
        label="车牌号码"
        show-overflow-tooltip
      />
      <el-table-column
        prop="carBrand"
        label="车辆品牌"
        show-overflow-tooltip
      />
      <el-table-column
        prop="totalEffectiveDate"
        label="剩余有效天数"
        show-overflow-tooltip
      />
      <el-table-column
        prop="cardStatus"
        label="状态"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ formatPoleStatus(scope.row.cardStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="">
          <el-button size="mini" type="text">续费</el-button>
          <el-button size="mini" type="text">查看</el-button>
          <el-button size="mini" type="text">编辑</el-button>
          <el-button size="mini" type="text">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :page-size="params.pageSize"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import { getCarCardListAPI } from '@/api/carCard'
export default {
  data() {
    return {
      options: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 0,
          label: '正常'
        },
        {
          value: 1,
          label: '异常'
        }
      ],
      params: {
        page: 1,
        pageSize: 10,
        personName: '',
        carNumber: '',
        cardStatus: ''
      },
      carCardList: [],
      carStatusList: [
        { value: 0, label: '有效' },
        { value: 1, label: '过期' },
        { value: null, label: '全部' }
      ],
      total: 0

    }
  },
  mounted() {
    this.getCardList()
  },
  methods: {
    async getCardList() {
      const res = await getCarCardListAPI(this.params)
      // console.log(res)
      this.carCardList = res.data.rows
      this.total = res.data.total
    },
    // 状态切换
    formatPoleStatus(chargetType) {
      const MAP = {
        0: '有效',
        1: '过期'
      }
      return MAP[chargetType]
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      this.getPoleList()
    },
    // 搜索功能
    doSearch() {
      this.params.page = 1
      this.getCardList()
    }
  }
}
</script>

<style>

</style>
